<template>
    <div class="home">
        <p>当前水温:{{ temp }} C</p>
        <p>当前水位:{{ height }}Cm</p>
        <button @click="changeTemp">水温+10</button>
        <button @click="changeHeight">水位+10</button>
    </div>
</template>


<script setup lang="ts" name = "Page22">

import { ref,watch, watchEffect} from 'vue';
let temp = ref(0);   
let height = ref(0);   
function changeTemp(){
    temp.value +=10
}
function changeHeight(){
    height.value +=10
}
/*
watch([temp,height],(value)=>{
    let [newTemp,newHeight]=value
    if(newTemp >=60 || newHeight >=80){
        console.log("不能搞了")
    }
})
*/
// 用啥就监视啥
/*
立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数
watch对比watchEffect
1.都能监听响应式数据的变化，不同的是监听数据变化的方式不同
2.watch:要明确指出监视的数据
3.watcheffect:不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)
*/

watchEffect(()=>{
    if(temp.value >=60 || height.value >=80){
        console.log("不能搞了")
    }
})
</script>

<style lang="scss" scoped>

</style>